<template>
	<view class="main">
		<view class="select-wrap uni-flex uni-align-items-c uni-justify-content-sb" v-if="role!=1 && role!=5">
			<u-search placeholder="请输入名字" v-model="username" :show-action="false" bg-color="#F6F6F6" :height="80"
				@change="searchChange"></u-search>
			<view class="item">
				<dropdown type="select" :default="constructionDefault" :list="constructionSiteList" height="600"
					@handle="handleConstructionSite">
				</dropdown>
			</view>
		</view>
		<view v-else class="search-wrap uni-flex uni-align-items-c">
			<u-search placeholder="请输入名字" v-model="username" :show-action="false" bg-color="#F6F6F6" :height="80"
				@change="searchChange"></u-search>
		</view>
		<view class="list-wrap margin-top-110">
			<template v-if="userFindByAuditUsersData.length>0">
				<navigator v-for="(item,index) in userFindByAuditUsersData" :key="indedx"
					:url="'./certificationAuditPersonalInfo?id=' + item.id" hover-class="none"
					class="item uni-flex uni-align-items-c">
					<view class="lf">
						<image v-if="item.face" :src="imgUrl + item.face" mode=""></image>
					</view>
					<view class="rt uni-flex uni-flex-direction-c uni-justify-content-c">
						<view class="name">
							{{item.username}}
							<template v-if="item.role==1">（总包部）</template>
							<template v-else-if="item.role==2">（项目人员）</template>
							<template v-else-if="item.role==3">（劳务人员）</template>
							<template v-else-if="item.role==4">（访客）</template>
							<template v-else-if="item.role==5">（监理）</template>
						</view>
						<view class="time">
							{{item.createTime}}
						</view>
					</view>
				</navigator>
			</template>
			<u-empty v-else text="数据为空!" mode="list" margin-top="400"></u-empty>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js';
	import dropdown from '@/components/dropdown.vue';
	export default {
		components: {
			dropdown
		},
		data() {
			return {
				imgUrl: '',
				constructionDefault: '工地',
				sectionList: [],
				constructionSiteList: [],
				siteId: '', //工地ID
				userFindByAuditUsersData: [], //未审核用户列表
				role: null, //角色 1 总包部 2 项目人员 3 劳务人员 4 访客 5 监理
				username: ''
			}
		},
		onLoad() {
			this.imgUrl = config.imgUrl + '/';
		},
		onShow() {
			this.role = uni.getStorageSync('user').role;
			if (this.role == 1 || this.role == 5) {
				// 总包部,监理
				this.userFindByAuditUsers('','');
			} else {
				// 项目人员,访客,劳务人员
				let userId = uni.getStorageSync('user').id;
				this.findByUserBidAll(userId);
			}
		},
		methods: {
			// 搜索框change事件
			searchChange() {
				// 防抖
				this.$u.debounce(this.doSearch, 500);
			},
			// 搜索
			doSearch() {
				this.userFindByAuditUsers(this.siteId, this.username);
			},
			// 根据用户Id获取标段
			findByUserBidAll(userId) {
				this.$u.api.findByUserBidAll({
					userId: userId
				}).then(res => {
					if (res.code == 0) {
						this.siteFindAll(res.data[0].id);
					}
				})
			},
			// 获取所有的工地
			siteFindAll(bid) {
				this.$u.api.siteFindAll({
					bid: bid
				}).then(res => {
					if (res.code == 0) {
						if (res.data.length > 0) {
							// this.userFindByAuditUsers(res.data[0].id);//显示第一条
							this.userFindByAuditUsers('', ''); //显示全部
							res.data.map(item => {
								item.value = item.name;
							})
							this.constructionSiteList = [{
								value: '全部',
								id: ''
							}];
							this.constructionSiteList = this.constructionSiteList.concat(res.data);
						} else {
							this.$u.toast('工地为空!');
						}
					}
				})
			},
			// 获取未审核的用户
			userFindByAuditUsers(siteId, username) {
				this.$u.api.userFindByAuditUsers({
					siteId: siteId,
					username: username
				}).then(res => {
					if (res.code == 0) {
						this.userFindByAuditUsersData = res.data;
					}
				})
			},
			// 工地
			handleConstructionSite(e) {
				console.log('工地', e);
				this.siteId = e.select.id;
				this.userFindByAuditUsers(this.siteId, this.username);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.search-wrap {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 99;
			background: #fff;
			border-bottom: solid 2rpx #F6F6F6;
			padding: 0 32rpx;
			height: 100rpx;

			::v-deep .u-search {
				width: 686rpx;
			}
		}

		.select-wrap {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 99;
			background: #fff;
			border-bottom: solid 2rpx #F6F6F6;
			padding: 0 32rpx;
			height: 100rpx;

			::v-deep .u-search {
				width: 480rpx;
			}

			.item {
				width: 180rpx;
				position: relative;
			}

			.item:first-child {
				margin-right: 60rpx;
			}
		}

		.list-wrap {
			.item {
				height: 138rpx;
				background: #FFFFFF;
				padding: 0 32rpx;

				.lf {
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.rt {
					margin-left: 16rpx;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						width: 570rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.time {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #737373;
						margin-top: 8rpx;
						width: 570rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.item:not(first-child) {
				margin-top: 2rpx;
			}
		}

		.margin-top-110 {
			margin-top: 110rpx;
		}
	}
</style>
